<script lang='ts'>
import { defineComponent, onMounted, reactive, ref } from "vue";
import { Clock } from "@element-plus/icons";

import CustomerHeader from "@/layout/header/index.vue";

import Detail from "./components/Detail/index.vue";
import AtlasCard from "./components/AtlasCard/index.vue";

import { createImgPreview } from "./components/Preview";

import { getAtlasReportList } from "@/api/atals/index";

import { config } from "@/config";

import { ElMessage } from "element-plus";
import { downloadImage } from "@/utils/dom-utils";

interface FormModule {
  name: string;
  regionCode: string;
  year: string;
}

export default defineComponent({
  name: "Protal",
  components: { CustomerHeader, AtlasCard, Clock, Detail, ElMessage },
  setup() {
    const handleNodeClick = (data: any) => {
      if (typeof data.value !== "undefined") {
        console.log(data.value);
        formInline.regionCode = data.value;
        getData();
      }
    };
    const onSubmit = () => {
      console.log("执行查询操作");
      getData();
    };
    const reset = () => {
      formInline.name = "";
      formInline.regionCode = "";
      formInline.year = "";
      getData();
    };

    const getData = async () => {
      try {
        let result = await getAtlasReportList({
          name: formInline.name,
          regionCode: formInline.regionCode,
          year: formInline.year,
        });
        if (result.data.state === "success") {
          let r = result.data.data;
          console.log(r);
          atlasCard.value = [];
          r.forEach((element: any) => {
            let o = {
              id: element.Id,
              title: element.name,
              src: config.baseUrl + element.ThumbNailUrl,
              fileUrl: config.baseUrl + element.fileUrl,
            };
            atlasCard.value.push(o);
          });
        }
      } catch (error) {
        ElMessage.error("请求异常");
      }
    };

    const getImageUrl = (name: string) => {
      return new URL(`/src/assets/test/${name}`, import.meta.url).href;
    };
    const formInline = reactive<FormModule>({
      name: "",
      regionCode: "",
      year: "",
    });

    const imgPreviewUrl = ref("");

    const showNoImg = () => {
      createImgPreview({
        index: 0,
        imageList: [imgPreviewUrl.value],
      });
    };

    const atlasCard: any = ref([]);

    // const previewCom: any = ref(null);
    const detailCom: any = ref(null);

    onMounted(async () => {
      getData();
    });

    const changeSelect = (data: any) => {
      switch (data.type) {
        case "down":
          console.log("下载", data.fileUrl);
          downloadImage(data.fileUrl, "atlas.jpg");
          break;
        case "preview":
          imgPreviewUrl.value = data.fileUrl;
          showNoImg();
          break;
        case "detail":
          detailCom.value.open(data.id);
          break;

        default:
          break;
      }
    };

    return {
      detailCom,
      handleNodeClick,
      onSubmit,
      reset,
      atlasCard,
      data: [
        {
          label: "基础测绘",
          children: [
            {
              value: "",
              label: "行政区",
              children: [
                {
                  value: "kuerle",
                  label: "库尔勒市",
                },
                {
                  value: "hejing",
                  label: "和静县",
                },
                {
                  value: "luntai",
                  label: "轮台县",
                },
                {
                  value: "yuli",
                  label: "尉犁县",
                },
                {
                  value: "ruoqiang",
                  label: "若羌县",
                },
                {
                  value: "qiemo",
                  label: "且末县",
                },
                {
                  value: "yanqi",
                  label: "焉耆县",
                },
                {
                  value: "heshuo",
                  label: "和硕县",
                },
                {
                  value: "bohu",
                  label: "博湖县",
                },
              ],
            },
          ],
        },
        {
          label: "工作用图",
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      formInline,
      changeSelect,
    };
  },
});
</script>

<template>
  <div class="portal-page-wrap">
    <CustomerHeader></CustomerHeader>
    <el-main style="height: calc(100vh - 60px)">
      <el-row>
        <el-col :span="4">
          <div class="bar">
            <div class="bar-title">
              <div>图集目录</div>
            </div>
            <el-tree
              :data="data"
              :props="defaultProps"
              @node-click="handleNodeClick"
            />
          </div>
        </el-col>

        <el-col :span="19">
          <div class="part">
            <div class="part-title">
              <el-form
                :inline="true"
                :model="formInline"
                class="demo-form-inline"
                size="mini"
              >
                <el-form-item label="图集报告名称:">
                  <el-input
                    v-model="formInline.name"
                    placeholder="请输入图集报告名称"
                  ></el-input>
                </el-form-item>
                <el-form-item label="行政区划:">
                  <el-select
                    v-model="formInline.regionCode"
                    placeholder="请选择行政区划搜索"
                  >
                    <el-option label="库尔勒市" value="kuerle"></el-option>
                    <el-option label="和静县" value="hejing"></el-option>
                    <el-option label="轮台县" value="luntai"></el-option>
                    <el-option label="尉犁县" value="yuli"></el-option>
                    <el-option label="若羌县" value="ruoqiang"></el-option>
                    <el-option label="且末县" value="qiemo"></el-option>
                    <el-option label="焉耆县" value="yanqi"></el-option>
                    <el-option label="和硕县" value="heshuo"></el-option>
                    <el-option label="博湖县" value="bohu"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="年份:">
                  <el-select
                    v-model="formInline.year"
                    placeholder="选择年份进行搜索"
                  >
                    <el-option label="2021" value="2021"></el-option>
                    <el-option label="2020" value="2020"></el-option>
                    <el-option label="2019" value="2019"></el-option>
                    <el-option label="2018" value="2018"></el-option>
                    <el-option label="2017" value="2017"></el-option>
                    <el-option label="2016" value="2016"></el-option>
                    <el-option label="2015" value="2015"></el-option>
                    <el-option label="2014" value="2014"></el-option>
                    <el-option label="2013" value="2013"></el-option>
                    <el-option label="2012" value="2012"></el-option>
                    <el-option label="2011" value="2011"></el-option>
                    <el-option label="2010" value="2010"></el-option>
                    <el-option label="2009" value="2009"></el-option>
                    <el-option label="2008" value="2008"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="onSubmit">查询</el-button>
                  <el-button type="primary" @click="reset">重置</el-button>
                </el-form-item>
              </el-form>
            </div>

            <div class="part-body">
              <template v-for="item in atlasCard" :key="item.id">
                <AtlasCard :data="item" @select="changeSelect"></AtlasCard>
              </template>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </div>
  <Detail ref="detailCom"></Detail>
</template>

<style>
body {
  width: 100%;
}
</style>
<style lang='less' scoped>
.portal-page-wrap {
  padding-top: 60px;
  .bar {
    height: 83vh;
    width: 220px;
    margin: 20px 0 0 25px;
    border-radius: 5px;
    border: 1px rgb(215, 231, 237) solid;
    padding-bottom: 20px;
    // box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    display: inline-block;
    .bar-title {
      height: 30px;
      color: white;
      background-color: rgb(50, 126, 222);
      border-radius: 5px 5px 0 0;
      div {
        padding: 5px 5px;
        background: linear-gradient(135deg, transparent 100px, white 0) bottom
          right;
        border: 0px;
        border-top-right-radius: 4px;
      }
    }
  }
  .part {
    height: 83vh;
    width: 100%;
    margin: 20px 0 0 25px;
    padding-bottom: 20px;
    border-radius: 10px;
    border: 1px rgb(215, 231, 237) solid;
    display: inline-block;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background-color: rgb(50, 126, 222);
    }
    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      border-radius: 10px;
      background-color: transparent;
    }
    .part-title {
      margin: 10px 20px;
    }
    .part-body {
      margin: 0 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
    }
  }
}
</style>
<style scoped>
:deep(.el-tree-node__content) {
  margin-bottom: 5px;
}
:deep(.el-input__inner) {
  border: 1px rgb(102, 160, 232) solid;
}
</style>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  overflow: hidden;
  vertical-align: -0.15em;
  fill: currentColor;
}
</style>